<template>
  <div class="EcuDetailMain h100" ref="EcuDetailMainRef">
    <a-tabs v-model="activeKey" class="tabCommon EcuDetailMainTab">
      <a-tab-pane key="relatedModel" :tab="$t('relatedModel')" ref="tabPaneRef">
        <ecu-detail-main-model-lists
          v-if="activeKey === 'relatedModel'"
          :tbData="tbData"
        ></ecu-detail-main-model-lists>
      </a-tab-pane>
      <a-tab-pane key="relatedVersion" :tab="$t('relatedVersion')" force-render>
        <ecu-detail-main-version-lists
          v-if="activeKey === 'relatedVersion'"
          :ecuModuleId="ecuModuleId"
        ></ecu-detail-main-version-lists>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import EcuDetailMainModelLists from './EcuDetailMainModelLists'
import EcuDetailMainVersionLists from './EcuDetailMainVersionLists'
import { mapState } from 'vuex'
export default {
  components: {
    EcuDetailMainModelLists,
    EcuDetailMainVersionLists
  },
  props: {
    tbData: {
      type: Array,
      default () {
        return []
      }
    },
    ecuModuleId: {
      type: String,
      default: ''
    },
    numType: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime
    })
  },
  data () {
    return {
      activeKey: 'relatedModel'
    }
  },
  watch: {
    instantUpdateTime: {
      handler () {
        this.activeKey = this.numType || 'relatedModel'
      },
      immediate: true
    }
  }
}
</script>
<style lang="less">
.EcuDetailMain {
  .EcuDetailMainTab {
    height: 100%;
    display: flex;
    flex-direction: column;
    .ant-tabs-top-bar {
      flex: none;
    }
    .ant-tabs-content {
      flex: 1 0 0;
      // overflow: hidden;
      // padding-right: 24px;
    }
  }
}
</style>
